<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    :title="$t('exportModal.title')"
    class="win-module-export"
    height="auto"
    :resize="false"
    :maximizable="false"
    :ok-button="addModule"
    cancel-button
    @close="cancelModal"
  >
    <je-form layout="vertical" :model="modelRef">
      <je-form-item
        label-align="top"
        :label="$t('exportModal.nameLabel')"
        name="fileName"
        v-bind="validateInfos.fileName"
      >
        <je-input v-model:value="modelRef.fileName" />
      </je-form-item>
      <je-form-item
        class="win-module-export-form-tablename"
        label-align="top"
        :label="$t('exportModal.codeLabel')"
        name="tableName"
        v-bind="validateInfos.tableName"
      >
        <je-select-tree
          v-model:value="modelRef.tableName"
          placeholder="请选择"
          :select-options="selectOptions"
          textarea
          style="height: 100px"
          :querys="getJQuery()"
          config-info="JE_CORE_RESOURCETABLE,tableName~tableCode~tableId,text~code~id,M"
          :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
        />
      </je-form-item>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { Input, Modal, Form, InputSelect } from '@jecloud/ui';
  import { dateFormat, isNotEmpty, getAxiosBaseURL } from '@jecloud/utils';
  import { verifyData } from '../../../helper/common';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalExport',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeSelectTree: InputSelect.Tree,
    },
    props: {
      modalShow: {
        type: Boolean,
        default: false,
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(props.modalShow);
      const modalData = ref(props.modalData);
      const modelRef = reactive({
        fileName: '系统表结构信息_' + dateFormat(new Date(), 'YYYY-MM-DD') + '.xls',
        tableCode:
          isNotEmpty(modalData.value?.nodeInfo) && modalData.value?.nodeInfo != 'MODULE'
            ? modalData.value.code
            : '',
        tableName:
          isNotEmpty(modalData.value?.nodeInfo) && modalData.value?.nodeInfo != 'MODULE'
            ? modalData.value.text
            : '',
        tableId:
          isNotEmpty(modalData.value?.nodeInfo) && modalData.value?.nodeInfo != 'MODULE'
            ? modalData.value.id
            : '',
      });
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };
      const rulesRef = reactive({
        fileName: [verifyData.required, verifyData.lengthMax],
        tableName: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        validate()
          .then(() => {
            const url =
              getAxiosBaseURL() +
              '/je/meta/resourceTable/table/column/exportColumns?fileName=' +
              modelRef.fileName +
              '&tableCodes=' +
              modelRef.tableCode;
            window.open(url);
            btn.loading = false;
            modal.close();
            emit('changeData', 'add');
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };
      const selectOptions = {
        selectExp: "'{nodeInfo}' != 'MODULE'",
        title: '选择指定角色编辑',
      };

      //分装j_query
      const getJQuery = () => {
        const j_query = [
          {
            code: 'SY_PRODUCT_ID',
            type: '=',
            value: props.productData.productId,
            cn: 'and',
          },
        ];

        return j_query;
      };
      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        visibleModule,
        addModule,
        centered: true,
        selectOptions,
        getJQuery,
      };
    },
  });
</script>
<style lang="less">
  .win-module-export {
    .win-module-export-form-tablename {
      .ant-form-item-explain-success {
        display: none;
      }
    }
  }
</style>
